<template>
  <el-dialog
    :title="title"
    class="comDialog dark"
    :visible.sync="dialogVisible"
    :width="width"
    :show-close="showClose"
    :close-on-click-modal="closeOnClickModal"
    :before-close="handleClose">
    <div class="content">
      <template v-if="tradeStatus === 'noMetaMask'">
        <div class="noMetaMask">
          <p class="title"><label class="logo"></label>Metamask</p>
          <p class="confirm"><a class="yellow" href="https://metamask.io/download.html" target="_blank">https:<label>//metamask.io/download.html</label></a></p>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: () => false,
    },
    width: {
      type: String,
      default: () => '400px',
    },
    confirmText: {
      type: String,
      default: () => '确定',
    },
    title: {
      type: String,
      default: () => '',
    },
    align: {
      type: String,
      default: () => 'center',
    },
    tradeStatus: {
      type: String,
      default: () => 'waiting',
    },
    headerBg: {
      type: String,
      default: () => 'blue',
    },
    showClose: {
      type: Boolean,
      default: () => true,
    },
    showCancel: {
      type: Boolean,
      default: () => false,
    },
    showConfirm: {
      type: Boolean,
      default: () => true,
    },
    cacelText: {
      type: String,
      default: () => '取消',
    },
    closeOnClickModal: {
      type: Boolean,
      default: () => true,
    },
    dialogType: {
      type: String,
      default: () => 'tips',
    },
    isShowBtn: {
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
    };
  },
  methods: {
    handleClose() {
      this.$emit('cancel');
      this.dialogVisible = false;
    },
    confirm() {
      if (this.dialogType === 'tips') {
        this.dialogVisible = false;
      }
      this.$emit('confirm');
    },
    openDialog() {
      this.dialogVisible = true;
    },
    cancel() {
      this.$emit('cancel');
      this.dialogVisible = false;
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.showDialog;
      },
      set(val) {
        this.$emit('update:showDialog', val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/variable.scss';
.comDialog{
  ::v-deep .el-dialog__body{
    padding: 0;
  }
  ::v-deep .el-dialog{
    border-radius: 20px !important;
  }
  ::v-deep .el-dialog__close{
    font-size: 30px;
    color: #fff;
  }
  ::v-deep .el-dialog__header{
      padding-top: 31px;
      padding-left: 25px;
  }
  ::v-deep .el-dialog__footer{
      text-align: center;
  }
  .content{
    text-align:center;
    color: #FFFFFF;
    p{
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
  .status-img{
    margin-bottom: 25px;
  }
}
.comDialog.dark{
  ::v-deep .el-dialog{
    background: $bg-color;
  }
  p, a{
    color: #fff;
  }
  .logo{
    background: #504B5E;
  }
}
.comDialog.light{
  ::v-deep .el-dialog{
    // background: $trade-lightDialogbgcolor;
  }
  p, a{
    color: #3E384F;
  }
  .logo{
    background: #E4E4E4;
  }
}
.noMetaMask{
  p.title{
    font-size: 36px;
    border-bottom: 1px solid #443D57;
    padding-bottom: 24px;
    box-sizing: border-box;
    .logo{
      display: inline-block;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 20px;
      position: relative;
      top: -2px;
    }
  }
   a{
    color: #fff;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    text-decoration-line: underline;
    cursor: pointer;
    label{
      cursor: pointer;
      color: #40C9DF;
      font-size: 20px
    }
  }
  p.confirm{
    padding: 30px 0 100px;
    box-sizing: border-box;
  }
}
</style>
